import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { Map, Feature } from 'ol';
import { Vector as VectorLayer, Tile } from 'ol/layer';
import { Style, Stroke, Circle } from 'ol/style';
import { Fill } from 'ol/style';
import { fromLonLat } from 'ol/proj';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Polygon } from 'ol/geom';
import { LocationSearchService } from './location-search.service';
@Component({
  selector: 'kylin-location-search',
  templateUrl: './location-search.component.html',
  styleUrls: ['./location-search.component.css'],
  providers: [LocationSearchService]
})
export class LocationSearchComponent implements OnInit, AfterViewInit {
  @Input() map: Map;

  province = null;
  provinceOptions = [];
  city = null;
  cityOptions = [];
  district = null;
  districtOptions = [];
  currentLayer: any;
  currentCenter = [];
  currentZoom = 4;
  locationDropdownState = false;
  constructor(private locationSearchService: LocationSearchService) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.provinceOptionsInit();
  }

  private provinceOptionsInit() {
    this.locationSearchService.fetchLocationOptions('中国').then(res => {
      this.provinceOptions = res.options;
    })
  }

  locationDropdownChange($evnet) {
    if (!$evnet) {
      if (this.currentLayer) {
        // this.map.removeLayer(this.currentLayer);
        // this.currentLayer = null;
      }
    }
  }

  locationSelectChange(value, type) {
    if (!value) {
      this.map.removeLayer(this.currentLayer);
      this.currentLayer = null;
      switch (type) {
        case 'province':
          this.city = null;
          this.cityOptions = null;
          this.district = null;
          this.districtOptions = null;
          break;
        case 'city':
          this.district = null;
          this.districtOptions = null;
          break;
        case 'district':
          break;
      }
      return;
    }
    this.map.removeLayer(this.currentLayer);
    this.currentLayer = null;
    switch (type) {
      case 'province':
        this.city = null;
        this.cityOptions = null;
        this.district = null;
        this.districtOptions = null;
        this.locationSearchService.fetchLocationOptions(value).then(res => {
          this.currentCenter = res.center;
          this.currentZoom = 5;
          this.cityOptions = res.options;
          this.drawLayer(res.boundaries);
        });
        break;
      case 'city':
        this.district = null;
        this.districtOptions = null;
        this.locationSearchService.fetchLocationOptions(value).then(res => {
          this.currentCenter = res.center;
          this.currentZoom = 7;
          this.districtOptions = res.options;
          this.drawLayer(res.boundaries);
        });
        break;
      case 'district':
        this.locationSearchService.fetchLocationOptions(value).then(res => {
          this.currentCenter = res.center;
          this.currentZoom = 9;
          this.drawLayer(res.boundaries);
        });
        break;
    }
  }

  private drawLayer(boundaries: any[]) {
    if (this.map) {
      // 瓦片图层
      const source = new VectorSource();
      // 矢量图层
      this.currentLayer = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(128, 216, 255, 0.3)'
          }),
          stroke: new Stroke({
            color: '#0091ea',
            width: 2
          }),
          image: new Circle({
            radius: 10,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      });
      boundaries.map(dataChild => {
        const target = dataChild;
        const coordinatesPolygon = [];
        const coordinates = target;
        for (let i = 0; i < coordinates.length; i++) {
          const pointTransform = fromLonLat([coordinates[i].lng, coordinates[i].lat], 'EPSG:3857');
          coordinatesPolygon.push(pointTransform);
        }
        // 多边形此处注意一定要是[坐标数组]
        const plygon = new Polygon([coordinatesPolygon]);
        // 多边形要素类
        const feature = new Feature({
          geometry: plygon
        });
        source.addFeature(feature); // todo 估计是在一个图层里面添加多个feature
      })
      this.map.addLayer(this.currentLayer);
      setTimeout(() => {  // 这里setTimeOut不能删除,保证了是先绘制出区域,再移动和缩放
        console.log(this.currentCenter);
        this.map.getView().animate({ center: this.currentCenter }, { zoom: this.currentZoom }); // 先移动再放大
        // this.map.getView().animate({ zoom: this.currentZoom }, { center: this.currentCenter }); // 先放大再移动
        // this.map.getView().animate({center: this.currentCenter, zoom: this.currentZoom}) // 同时移动和放大
      }, 0)
    }
  }

}

